<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" crossorigin="anonymous">
    <title>写博客</title>
</head>
<style>

    /*解决overflow: hidden抽搐问题*/
    body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    ::-webkit-scrollbar {
        overflow-x: hidden;
    }
</style>
<body>
<nav th:fragment="navigationbar(prefixUrl)" class="navbar navbar-expand-lg navbar-light navbar-form"
     style="background-color: #ffffff;box-shadow: 0 -2px 10px #d0cccc;">
    <div class="container">
        <!--写文章时特殊的导航条-->
        <a class="navbar-brand" th:href="@{/}">我们の社区</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li th:class="${prefixUrl=='index'}?'nav-item active':'nav-item'">
                    <a class="nav-link" th:href="@{/}">首页</a>
                </li>
                <li th:class="${prefixUrl=='blog'}?'nav-item active':'nav-item'">
                    <a class="nav-link" th:href="@{/blog}">文章社区</a>
                </li>
                <li th:class="${prefixUrl=='question'}?'nav-item active':'nav-item'">
                    <a class="nav-link" th:href="@{/question}">问答</a>
                </li>
            </ul>

            <!--用户未登录-->
            <div sec:authorize="!isAuthenticated()">
                <div class="nav-item">
                    <a class="btn btn-outline-secondary" th:href="@{/login}">登录</a>
                </div>
            </div>

            <!--用户已登录-->
            <div sec:authorize="isAuthenticated()" class="nav-item">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item dropdown">
                        <a style="color: rgba(0,0,0,.5);text-decoration: none" class="nav-link dropdown-toggle"
                           href="#"
                           id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                           aria-expanded="false">
                            <!--没有头像显示默认-->
                            <span th:if="${session.loginUser.avatar==null || session.loginUser.avatar==''}">
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill"
                                     fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                          d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
                                </svg>
                                <span sec:authentication="name"></span>
                            </span>
                            <!--用户有头像-->
                            <span th:if="${session.loginUser.avatar!=null && session.loginUser.avatar!=''}">
                                <img style="width: 30px;height:30px;border-radius: 50%;"
                                     th:src="${session.loginUser.avatar}" alt="头像">
                                <span sec:authentication="name"></span>
                            </span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item"
                               th:href="'/user/' + ${session.loginUser.getUid()} + '/article'">个人中心</a>
                            <a class="dropdown-item"
                               th:href="'/user/profile/' + ${session.loginUser.getUid()}">我的资料</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" th:href="@{/logout}">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<div role="main" class="container mt-3 p-3 bg-white rounded">
    <form th:action="${article}==null ? '/blog/article' : '/blog/article/update/' + ${article.getId()}" method="post">
        <h4 class="mb-3">发布文章</h4>
        <input type="hidden" name="uid" th:value="${session.loginUser.getUid()}"><!--作者uid-->
        <div class="row">
            <div class="col-md-8 mb-3">
                <label th:for="title">文章标题</label>
                <input type="text" name="title" class="form-control" th:id="title" th:value="${article.getTitle()}"
                       th:if="${article!=null}" required>
                <input type="text" name="title" class="form-control" th:id="title" required th:if="${article==null}">
            </div>

            <div class="col-md-2 mb-3">
                <label for="category">文章标签</label>
                <select name="categoryId" class="custom-select d-block w-100" id="category">
                    <option value="" selected>无分类</option>
                    <option th:each="category:${categoryList}"
                            th:value="${category.getId()}" th:text="${category.getCategoryName()}">
                    </option>
                </select>
            </div>

            <div class="col-md-2">
                <button class="btn btn-primary" type="submit" style="margin-top: 32px">发布</button>
            </div>
        </div>
        <!--文章编辑器-->
        <div th:replace="~{common/editor::editor}"></div>
    </form>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script th:src="@{/js/jquery-3.5.1.js}" crossorigin="anonymous"></script>
<script th:src="@{/js/popper.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/js/bootstrap.min.js}" crossorigin="anonymous"></script>
</body>
</html>